<!--
soft keyboard
车牌输入
-->
<template>
	<view class="soft-keyboard">
		<view class="keyboards">
			<view class="keyboards-cell" v-for="(item,index) in (licenseNumber.length == 0? province.split('').splice(0,32) : charcode)" :key="item" @click="keyboarddown('add',item)">
				<text :class="licenseNumber.length == 0?'siyuan-medium' :' intel-one-mono-medium'">{{item}}</text>
			</view>
		</view>
		<view class="keyboards oneline" :class="{'number-key': licenseNumber.length != 0}">
			<view class="keyboards-cell" v-for="(item,index) in (licenseNumber.length == 0 ? province.split('').splice(32) : extendCode)" :key="item" @click="keyboarddown('add',item)">
				<text :class="licenseNumber.length == 0?'siyuan-medium' :' intel-one-mono-medium'">{{ item }}</text>
			</view>
			<view class="delete" @click="keyboarddown('delete')">
				<van-icon name="arrow-left" color="#FFFFFF" size="14"/>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref} from "vue";
	let props= defineProps({
		licenseNumber:{
			type: String,
			default: "甘"
		}
	})
	let emits = defineEmits(['keyClick'])
	
	let charcode = ref([]);
	let extendCode = ref([])
	let province = ref('京沪苏浙粤鲁晋冀豫川渝辽吉黑皖鄂津贵云桂琼青新藏蒙宁甘陕闽赣湘使领警学港澳');	
	
	// getCharCode 
	let getCharCode = ()=>{
		let s = [];
		let a = [];
		for (let i = 65; i <= 90; i++) {
		  s.push(String.fromCharCode(i))
		}
		for (let i = '0'.charCodeAt(0); i <= '9'.charCodeAt(0); i++) {
			String.fromCharCode(i) > 5 ? a.push(String.fromCharCode(i)): s.push(String.fromCharCode(i))
		}
		charcode.value = s;
		extendCode.value = a;
	}
	getCharCode();
	
	const keyboarddown = (type,word) => {
		if(props.licenseNumber.length == 8 && type == 'add') return;
		emits('keyClick',type, word)
	}
</script>

<style lang="scss" scoped>
	.soft-keyboard {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 470rpx;
		z-index: 999;
		padding: 34rpx 54rpx 0;
		background-color: #f2f2f2;
		.keyboards {
			display: grid;
			grid-template-columns: repeat(8,66rpx);
			grid-template-rows: repeat(4,66rpx);
			align-content: space-between;
			justify-content: space-between;
			grid-row-gap: 18rpx;
			.keyboards-cell {
				background-color: #FFFFFF;
				text-align: center;
				text {
					font-size: 26rpx;
					line-height: 66rpx;
				}
			}
			.keyboards-cell:nth-child(33) {
				margin-left: 34rpx;
			}
			
		}
		.keyboards.oneline {
			position: relative;
			padding-left: 34rpx;
			padding-top: 18rpx;
			grid-template-columns: repeat('',66rpx);
			grid-column-gap: 18rpx;
		}
		.keyboards.number-key {
			padding-left: 96rpx;
			.delete {
				right: 96rpx;
			}
		}
		.delete {
			position: absolute;
			right: 34rpx;
			top: 18rpx;
			width: 102rpx;
			height: 66rpx;
			background-color: #000000;
			text-align: center;
			line-height: 60rpx;
		}
	}
</style>